<%
CalendarDateSelect.format = (params[:fmt]||"natural").to_sym
params[:style]||="red"
params[:style]=nil if params[:style]=="default"
%>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>CalendarDateSelect Demo - A lightweight Ruby on Rails Date Picker / DateTime picker based on the prototype JavaScript framework.</title>
      <%= javascript_include_tag "prototype" %>
      <%= stylesheet_link_tag "basic.css" %>
      <%= calendar_date_select_includes params[:style]%>
  </head>
  <style>
    pre { background-color:black; color:white; padding:15px; }
    dd {
    }
    dt {
      font-weight: bold;
      width: 320px;
    }

  </style>

  <body>
    <div id="container">
    <div id="content_header">
      &nbsp;
    </div>
    <div id="page">
      <br />
      <h1>CalendarDateSelect Demo</h1>
      <p style="text-align:center">
        <%= link_to "Project Home Page", "http://code.google.com/p/calendardateselect/" %>
      </p>
      <form id="options_form" name="options_form" method="get" action="">
        <div style="text-align:center">
          Style:
          <%= select_tag "style", options_for_select([["default"], ["blue"], ["red"], ["silver"], ["plain"]], params[:style]), :onchange => "$('options_form').submit();" %>
        </div>
        <div style="text-align:center">
          Date Format:
          <%= select_tag "fmt", options_for_select([["natural - January 2, 2007 5:00pm", "natural"], ["hyphen_ampm - 2007-02-01 5:00pm", "hyphen_ampm"], ["finnish - 1.2.2007 17:00", "finnish"], ["american - 12/31/2000 5:00 pm", "american"], ["euro_24hr - 01 January 2000 17:00", "euro_24hr"]], params[:fmt]),  :onchange => "$('options_form').submit();" %>
        </div>
      </form>
      <% tabset :id => "tabs8", :selected => params[:tab]||"embedded" do %>
      <br clear='both' />
      <div class="box">
        <% define_tab "embedded", "Embedded Calendars" do %>
          <h1>Embedded Calendars</h1>
          <h2>No Time</h2>
          
          <%= calendar_date_select_tag "e_date", nil, :embedded => true, :year_range => 10.years.ago..0.years.ago %>
          <pre>
&lt;%= calendar_date_select_tag "e_date", nil, :embedded => true, :year_range => 10.years.ago..0.years.ago %&gt;
          </pre>
          <hr />
          <h2>With time</h2>
          <p>
            <%= calendar_date_select_tag "e_date_and_time", nil, :embedded => true, :time => true %>
          </p>
          <pre>
&lt;%= calendar_date_select_tag "e_date_and_time", nil, :embedded => true, :time => true %&gt;
          </pre>
          <hr />
          <h2>Mixed</h2>
          <p>
            <%= calendar_date_select_tag "e_date_and_time_mixed", nil, :embedded => true, :time => :mixed %>
          </p>
          <pre>
&lt;%= calendar_date_select_tag "e_date_and_time_mixed", nil, :embedded => true, :time => :mixed %&gt;
          </pre>
        <% end %>
        <% define_tab "popup", "Popup Calendars" do %>
          <h1>Popup Calendars</h1>
          
          <h2>No Time</h2>
          <p>
            <%= calendar_date_select_tag "p_date" %>
          </p>
          
          
          <pre>
&lt;%= calendar_date_select_tag "e_date" %&gt;
          </pre>
          
          <hr />
          <h2>With time</h2>
          <p>
            <%= calendar_date_select_tag "p_date_and_time", nil, :time => true %>
          </p>
          
          
          <pre>
&lt;= calendar_date_select_tag "p_date_and_time", "January 2, 2007 5:45 pm", :time => true  %&gt;
          </pre>
        <% end %>
        <% define_tab "form_builder", "Form Builder Integration" do %>
          <h1>Form builder integration</h1>
          <p>Additionally, calendar_date_select can be used in a form builder, or bound to an instance variable.
            It's intelligent and will check the models data type to determine whether or not to use a time field (though you can still override this behavior, if you wish, by setting :time => false).
          </p>
          <%
          @listing = Listing.new
          @listing.errors.add :last_follow_up_at, "They're all gonna laugh at you!"
          @listing.errors.add :created_on, "They're all gonna laugh at you!"
          @listing.last_follow_up_at = "Apr 27, 2007 5:00 pm"
          %>
          <p>
            Last followed up at :<%= calendar_date_select :listing, :last_follow_up_at %>
          </p>
          
          
          <pre>
&lt;%
  @listing = Listing.new
  @listing.errors.add :last_follow_up_at, "They're all gonna laugh at you!"
  @listing.last_follow_up_at = "Apr 27, 2007 5:00 pm"
  %&gt;
&lt;%= calendar_date_select :listing, :last_follow_up_at %&gt;
          </pre>
          
          <h4>or</h4>
           
          <% fields_for :listing do |f| %>
            Created On: <%= f.calendar_date_select :created_on, :embedded => true %>
          <% end %>
          
          
          <pre>
&lt;% fields_for :listing do |f| %&gt;
  Created On: &lt;%= f.calendar_date_select :created_on, :embedded => true %&gt;
&lt;% end %&gt;
          </pre>
        <% end %>
        <% define_tab "callbacks", "Callbacks" do %>
          <h1>Callbacks</h1>
          <p>
            Below is a list of all callbacks available to Calendar date select.  all callbacks are executed from the context of the input element it is bound to ( so, this.value will give you the value of the form element)
          </p>
          <dl>
              <dt>before_show / after_show</dt>
              
              <dt>before_close / after_close</dt>
              
              <dt>after_navigate</dt>
              <dd>Called when navigating to a different month.  Passes first parameter as a date object refering to the current month viewed</dd>
              
              <dt>onchange</dt>
              <dd>Called when the form input value changes</dd>
            </li>
          </dl>
          <hr clear='all' />
          <div style="float:left; ">
            <%= calendar_date_select_tag "event_demo", "", 
              :before_show => "log('Calendar Showing');" ,
              :after_show => "log('Calendar Shown');" ,
              :before_close => "log('Calendar closing');" ,
              :after_close => "log('Calendar closed');",
              :after_navigate => "log('Current month is ' + (param.getMonth()+1) + '/' + (param.getFullYear()));",
              :onchange => "log('value changed to - ' + $F(this));"
            %>
          </div>
          <div style="float:right">
            <h2>Output</h2>
            <textarea id="event_output" style="background-color: black; width:500px; height:200px;  color:white"></textarea>
          </div>
          <br clear='both'/>
          <script type="text/javascript" charset="utf-8">
            //<![CDATA[
              function log(output)
              {
                $('event_output').value += output + "\n";
                $('event_output').scrollTop=1000000000
              }
            //]]>
          </script>
          <pre>
&lt;%= calendar_date_select_tag "event_demo", "", 
  :before_show => "log('Calendar Showing');" ,
  :after_show => "log('Calendar Shown');" ,
  :before_close => "log('Calendar closing');" ,
  :after_close => "log('Calendar closed');",
  :after_navigate => "log('Current month is ' + (param.getMonth()+1) + '/' + (param.getFullYear()));",
  :onchange => "log('value changed to - ' + $F(this));"
%&gt;

          </pre>
          <hr />
          <h2>Using callbacks to prevent date from being selected</h2>
          <p>One application of callbacks is to prevent the user from selecting dates in the past.</p>
        <% end %>
        
        
        
        
        
        
        
        
        
        
        
        <% define_tab "other", "Other features" do %>
          <h1>Other features</h1>
          
          <h2>Remove buttons:</h2>
          <%= calendar_date_select_tag "milestone", nil, :embedded => false, :buttons => false %>
          
          <pre>
  &lt;%= calendar_date_select_tag "no_buttons", nil, :embedded =&gt; true, :buttons =&gt; false %&gt;
          </pre>
          
          <h2>Look ma!  Dropdowns stay behind!</h2>
          <p>
            Calendar Date Select shows on top of drop downs in IE 6... thanks to an infamous iframe hack.
          </p>
          <%= calendar_date_select_tag "ie_dropdown" %>
          <p>
            <select><option>Stay behind, drop down</option></select>
          </p>
          
          <h2>Disabled form elements can't be updated</h2>
          <%= calendar_date_select_tag "disabled_field", "January 20, 2007", :disabled => true %> <br />
          <%= calendar_date_select_tag "readonly_field", "January 20, 2007", :readonly => true %>
          
          <pre>
  &lt;%= calendar_date_select_tag "disabled_field", "January 20, 2007", :disabled => true %&gt;
  &lt;%= calendar_date_select_tag "readonly_field", "January 20, 2007", :readonly => true %&gt;
          </pre>

          <h2>Month/year selector as a label</h2>
          <%= calendar_date_select_tag "month_year_selector_label", "", :month_year => "label" %> <br />
          <pre>
&lt%= calendar_date_select_tag "month_year_selector_label", "", :month_year => "label" %&gt;
          </pre>
          

          <h2>Force using the popup</h2>
          <p>Disables the input box so the user is coerced to use the popup control to input the date.</p>
          <%= calendar_date_select_tag "month_year_selector_label", "", :popup => :force %> <br />
          <pre>
&lt%= calendar_date_select_tag "month_year_selector_label", "", :popup => :force %&gt;
          </pre>
          

          <h2>Use a popup window with a hidden field</h2>
          <p></p>
          <%= calendar_date_select_tag "pop_up_hidden", "", :hidden => true %> <br />
          <pre>
&lt%= calendar_date_select_tag "pop_up_hidden", "", :hidden => true  %&gt;
          </pre>

          <h2>Limit the date selection to be in the past</h2>
          <p></p>
          <%= calendar_date_select_tag "birth_day", "", :valid_date_check => "date < (new Date()).stripTime()" %> <br />
          <pre>
&lt%= calendar_date_select_tag "birth_day", "", :valid_date_check => "date &lt; (new Date()).stripTime()" %&gt;
          </pre>
          
        <% end %>
      </div>
      <% end %>
    </div>
    <div id="content_footer">
      
    </div>
    </div>
  </body>
</html`>
`